import { Form, Input, Button } from "antd";
import { logon } from "../../api/api";
import { Link } from "react-router-dom";
import "./_style.scss";
const LogonForm = (props) => {
  const submit = data => {
    console.log(data);
    logon(data).then(res => {
      props.onLogined(res);
    });
  };
  return (
    <div className="logon_form">
      <h2>注册</h2>
      <Form name="logon" onFinish={submit}>
        <Form.Item
          labelAlign="left"
          className="user_name item"
          label="手机号"
          name="phone"
          rules={[
            {
              required: true,
              message: "请输入手机号!"
            }
          ]}
        >
          <div className="input_box">
            <Input />
          </div>
        </Form.Item>
        <Form.Item
          labelAlign="left"
          className="user_name item"
          label="昵称"
          name="nickName"
          rules={[
            {
              required: true,
              message: "请输入昵称!"
            }
          ]}
        >
          <div className="input_box">
            <Input />
          </div>
        </Form.Item>
        <Form.Item
          labelAlign="left"
          className="password item"
          label="密码"
          name="passWord"
          rules={[
            {
              required: true,
              message: "请输入密码!"
            }
          ]}
        >
          <div className="input_box">
            <Input.Password />
          </div>
        </Form.Item>
        <Form.Item
          labelAlign="left"
          className="password item"
          label="确认密码"
          name="confirm"
          dependencies={["passWord"]}
          rules={[
            {
              required: true,
              message: "请确认密码!"
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('passWord') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入密码不一致!'));
              },
            }),
          ]}
        >
          <div className="input_box">
            <Input.Password />
          </div>
        </Form.Item>
        <div className="btns">
          <Button  htmlType="submit">注册</Button>
          <Link to="/login">
            <Button>登录</Button>
          </Link>
        </div>
      </Form>
    </div>
  );
};

export default LogonForm;
